<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <SlidingPanel :Show="Show" :Width="Width" @update:Show="SlidingPanelHide" CustomClass="SlidingPanelContent">
    <div class="scroll-wrap">
      <el-scrollbar style="height: 100%;">
    <el-container v-loading="listLoading" style="height: 100%">
      <el-header>
        <p class="plantitle">{{recordStatus.equipmentType}}-{{recordStatus.facilitiesNo}}</p>
      </el-header>
      <el-main>
        <div class="insider-detail-wrap">
          <div class="insider-details-status insider-wrap-border">
            <div class="insider-details-status__item">
              <div class="in-icons" style="font-size: 18px"><i class="el-icon-location" style="color:rgba(80, 227, 194,.3);margin-right: 5px;"></i></div>
              <div class="in-text">{{recordStatus.positionDescription}}</div>
            </div>
            <div class="insider-details-status__item">
              <div class="in-icons" style="font-size: 18px"><icon-svg icon-class="person" style="fill:rgba(80, 227, 194,.3);margin-right: 5px;" /></div>
              <div class="in-text">巡检人：{{recordStatus.inspectionPerson}}</div>
            </div>
            <div class="insider-details-status__item">
              <div class="in-text">巡检结果：<span v-if="recordStatus.inspectionResult==='0'">正常</span><span v-if="recordStatus.inspectionResult==='1'" style="color:#F5A623">异常</span></div>
            </div>
          </div>
          <!--检查项-->
          <div class="insider-detail-checkedwrap insider-wrap-border">
            <p>一、检查项</p>
            <div class="insider-detail-checked__item" v-for="(item,index) in checkTestItems" :key="item.id">
              <div v-if="item.flag==='0'" class="insider-detail-itemopt">
                <div class="items-options">{{index+1}}、{{item.checkTestItem}}</div>
                <div class="items-checked-status">
                  <span v-if="item.itemVaule==='是'" style="color: #50E3C2;font-size: 18px"><i class="el-icon-circle-check"></i></span>
                  <span v-else style="color: #F5A623;font-size: 18px"><i class="el-icon-circle-close"></i></span>
                </div>
              </div>
              <div v-if="item.flag==='1'" class="insider-detail-itemopt">
                <div class="items-options">{{index+1}}、{{item.checkTestItem}}</div>
                <div class="items-checked-status">
                  <span>{{item.itemVaule}}</span>
                </div>
              </div>
            </div>
          </div>
          <!--异常情况-->
          <div class="insider-detail-because insider-wrap-border" v-if="recordStatus.inspectionResult==='1'">
            <p>二、异常情况</p>
            <div class="insider-detail-problem insider-wrap-border">
              <p>问题描述：{{recordStatus.problemDescription}}</p>
            </div>
            <div class="insider-problem-imgs">
              <div class="problem-img" v-for="(item,index) in recordStatus.uploadPictureIds" :key="index" @click="viewimgDetail(item)">
                <img :src="item+'?imageView2/1/w/120/h/120'" alt="">
              </div>
            </div>
            <div class="insider-handling-text" v-if="recordStatus.handling==='0'">
              <p>处理措施：已自行处理</p>
            </div>
            <div class="insider-handling-text" v-if="recordStatus.handling==='1'">
              <p>处理措施：上报维修</p>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
      </el-scrollbar>
    </div>
  </SlidingPanel>
</template>

<script>
  import SlidingPanel from '@/components/SliderPanel'
  import {
    outerdetails,
  } from "@/api/device/inspectionRecord/index";
  export default {
    name: "outerTagDetail",
    components: {SlidingPanel},
    props:{
      Show: {required: true, default: false},
      Width: {type: Number, default: 980},
      id: {
        type: String,
        default: ""
      }
    },
    data(){
      return {
        recordStatus:{},
        checkTestItems:[],
        listLoading:false
      }
    },
    methods:{
      init(){
        // 初始化
        this.getDetail()
      },
      SlidingPanelHide (v) {
        this.$emit('update:Show', v)
      },
      getDetail(){
        this.listLoading = true;
        outerdetails({id:this.id}).then(res=>{
          if (res.status===200){
            this.listLoading = false;
            this.recordStatus = res.data.recordInspectionResults;
            this.checkTestItems = res.data.item;
          }
        })
      },
      closeDialog(){
        //当面板关闭(点击关闭按钮)
        this.$emit("update:Show", false);
      },
      viewimgDetail(img){
        window.open(img)
      }
    },
    watch: {
      Show(v) {
        if (v) {
          let self = this;
          this.$nextTick(() => {
            self.init();
          });
        }else{
          this.recordStatus = {};
          this.checkTestItems = []
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .fulldialog .el-dialog__title {
    font-size: 32px;
  }
  .insider-detail-wrap{
    width: 880px;
    height: 100%;
    margin: 0 auto;
    .insider-details-status{
      display: flex;
      justify-content: space-between;
      padding: 20px 50px;
      .insider-details-status__item{
        display: flex;
        max-height: 50px;
        .in-text{
          max-width: 160px;
          line-height: 1.6;
        }
      }
    }
    .insider-detail-checkedwrap{
      &>p{
        font-size: 16px;
        color: #fff;
        font-weight: bold;
      }
      .insider-detail-itemopt{
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
      }
    }
    .insider-detail-because{
      padding: 20px 50px;
      &>p{
        font-size: 16px;
        color: #fff;
        font-weight: bold;
      }
      .insider-detail-problem{
        height: 90px;
        padding: 0 20px;
        margin-top: 30px;
        margin-bottom: 30px;
        p{
          line-height: 1.6;
          font-size: 12px;
          color:rgba(255,255,255,.7);
        }
      }
      .insider-problem-imgs{
        display: flex;
        flex-wrap: wrap;
        .problem-img{
          margin-left: 20px;
          margin-bottom: 20px;
          border-radius: 3px;
          cursor: pointer;
          &:first-child{
            margin-left: 0;
          }
        }
      }
      .insider-handling-text{
        font-size: 12px;
        color: rgba(255,255,255,.7);
      }
    }
  }
  .fulldialog {
    &.record-detail-dialog{
      .el-header {
        padding: 0;
      }
      .el-dialog__header {
        display: none;
      }
      .el-dialog__body {
        padding: 0;
        height: 100vh;
        width: 100%;
        overflow: hidden;
        .is-vertical {
          height: 100%;
        }
      }
      .plantitle {
        text-align: center;
        font-size: 20px;
      }
      .custom-dialog-btn {
        position: absolute;
        font-size: 30px;
        left: 40px;
        top: 16px;
        color: #fff;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .el-checkbox {
      display: block;
      margin-left: 0;
    }
    .dialog-footer {
      text-align: left;
    }
  }
</style>
